<template>
  <div class="jsbos-common-layout mc_components_list">
    <div class="jsbos-common-layout-center">
      <div class="jsbos-common-layout-main jsbos-flex-main">
        <div class="jsbos-common-head">
          <div v-if="ifAdd">
            <el-button type="primary" icon="el-icon-plus" @click="addMessage()">
              新增
            </el-button>
          </div>
        </div>
        <jsbos-table v-loading="listLoading" :data="list">
          <el-table-column
            prop="fullName"
            label="模版名称"
            :align="'left'"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="enCode"
            label="模版编码"
            :align="'left'"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <span
                class="edit_btn"
                @click="
                  addMessage(scope.row.id, scope.row.fullName, scope.row.enCode)
                "
                >编辑</span
              >
            </template>
          </el-table-column>
        </jsbos-table>
        <pagination
          v-if="ifAdd"
          :total="total"
          :page.sync="listQuery.currentPage"
          :limit.sync="listQuery.pageSize"
          @pagination="initData"
        />
      </div>
    </div>
    <Form
      :ifAdd="ifAdd"
      :taskCode="taskCode"
      v-if="formVisible"
      ref="Form"
      @refreshDataList="refreshDataList"
      @close="closeForm"
    ></Form>
  </div>
</template>

<script>
import Form from "./Form";
import { getList, getListAll } from "../api/mcMsgSendAggregation.js";
export default {
  components: { Form },
  props: {
    messageData: {
      type: Array,
      default: () => [],
    },
    taskCode: {
      type: String,
      default: "",
    },
    ifAdd: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formVisible: false,
      listQuery: {
        keyword: "",
        currentPage: 1,
        pageSize: 20,
      },
      keyword: "",
      listLoading: false,
      list: [
        {
          taskName: "111",
          taskUserName: "2222",
          itemName: "3333",
          itemTypeName: "4444",
        },
      ],
      total: 1,
    };
  },
  created() {
    this.initData();
  },
  methods: {
    search() {},
    reset() {},
    initData() {
      // this.$set(this.listQuery, "taskCode", this.taskCode);
      this.listQuery.taskCode = this.taskCode;
      const listMethod = this.ifAdd ? getList : getListAll;
      listMethod(this.listQuery).then((res) => {
        this.list = res.data.list;
        if (this.ifAdd) {
          this.total = res.data.pagination.total;
        } else {
          this.messageData.forEach((item, index) => {
            let isHave = res.data.list.findIndex((el) => {
              return el.enCode == item.enCode;
            });
            if (isHave == "-1") {
              this.list.push(item);
            }
          });
        }
      });
    },
    addMessage(id, fullName, enCode) {
      this.formVisible = true;
      this.$nextTick(() => {
        if (id) {
          this.$refs.Form.init(id, fullName, enCode);
        } else {
          this.$refs.Form.init(id, fullName, enCode);
        }
      });
    },
    closeForm() {
      this.formVisible = false;
      this.initData();
    },
    refreshDataList() {
      this.initData();
    },
  },
};
</script>

<style lang="scss" scoped>
.mc_components_list {
  height: 100%;
}
.tableContainer {
  flex: 1 0 0;
  height: 100%;
  overflow: unset !important;
}
.edit_btn {
  margin-right: 10px;
  color: #1890ff;
  cursor: pointer;
  font-weight: 500;
}
.del_btn {
  color: #ff3a3a;
  cursor: pointer;
  font-weight: 500;
}
</style>
